<template>
  <div class="waterAnalysis">
    <button class="leftTreetitleButton" @click="treeShowOrClose = true" v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-if="treeShowOrClose">
      <areaLeftTree class="waterMeterLeftTree" @getSearch="getSearch" @handleIds="handleIds" @clickClose="clickClose" />
    </div>
    <div :class="[
        { rightcontant: treeShowOrClose },
        { rightcontant2: !treeShowOrClose },
      ]">
      <div class="top">
        <div>
          <el-date-picker v-model="dateValue" type="month" placeholder="选择月" size="small" value-format="yyyy-MM" @change="getSTime" :picker-options="pickerOptions0">
          </el-date-picker>
        </div>
        <div>
          <span>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="serchClick">搜索</el-button>
            <el-button type="primary" size="mini" plain icon="el-icon-refresh-right" @click="resetClick">重置</el-button>
          </span>
        </div>
      </div>
      <div style="border-top: 1px solid #e6e6e6; margin: 20px 10px 0 10px"></div>
      <div style="margin-top:20px;">
        <el-table :data="alertTableData" :height="fullHeight-244" show-summary style="width:100%; margin-top: 20px">
          <el-table-column label="序号" type="index" align="center">
          </el-table-column>
          <el-table-column prop="hydrantName" label="监测点名称" align="center" width="140">
          </el-table-column>
          <el-table-column prop="highLimitAlarmCount" label="水压高报警" width="100" align="center">
          </el-table-column>
          <el-table-column prop="lowLimitAlarmCount" label="水压低报警" width="100" align="center">
          </el-table-column>
          <el-table-column prop="toppleAlarmCount" label="倾倒报警" align="center">
          </el-table-column>
          <el-table-column prop="lowBatteryAlarmCount" label="电池欠压报警" align="center" width="120">
          </el-table-column>
          <el-table-column prop="blankPipeAlarmCount" label="空管报警" align="center">
          </el-table-column>
          <el-table-column prop="hitAlarmCount" label="撞击报警" align="center">
          </el-table-column>
          <el-table-column prop="hardwareAlarmCount" label="硬件故障" width="120" align="center">
          </el-table-column>
          <el-table-column prop="leakAlarmCount" label="疑似漏水报警" align="center">
          </el-table-column>
          <el-table-column prop="moveAlarmCount" label="移位报警" align="center">
          </el-table-column>
          <el-table-column prop="freezeAlarmCount" label="低水温报警" align="center">
          </el-table-column>
          <el-table-column prop="alertCount" fixed="right" label="总计(次)" align="alertCount">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import areaLeftTree from "./components/areaLeftTree"; // 区域树
import {
  findFireHydrantAlertEventsList, //分页查询
} from "@/api/schedule/hydrant/flHydrantAlertEvents/index";
export default {
  components: {
    areaLeftTree,
  },
  data () {
    return {
      fullHeight: window.innerHeight,
      treeShowOrClose: true,
      nodeData: {}, // 检测点数据
      dateValue: "",
      pickerOptions0: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
        }
      },
      alertTableData: [
        {
          alertCount: "",
          blankPipeAlarmCount: "",
          freezeAlarmCount: "",
          highLimitAlarmCount: "",
          hydrantName: "",
          leakAlarmCount: "",
          lowBatteryAlarmCount: "",
          lowLimitAlarmCount: "",
          moveAlarmCount: "",
          toppleAlarmCount: ""
        },
      ],
      currentPage: 1, //当前页
      pagesize: 10,
      startDateStr: "",
      dqMonth: "",
      ids: "",
      tableData: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        name: '王小虎',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987124',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '12987126',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }]
    };
  },
  mounted () {
    this.handleYearMonth()
  },
  methods: {
    clickClose (res) {
      // console.log(res,999);
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    //获取年月
    handleYearMonth () {
      let myDate = new Date();
      let tYear = myDate.getFullYear();
      let tMonth = myDate.getMonth();
      var m = tMonth + 1;
      if (m.toString().length == 1) {
        m = "0" + m;
      }
      this.dqMonth = tYear + '-' + m;
      console.log(this.dqMonth)
      this.startDateStr = this.dqMonth
      this.dateValue = this.dqMonth
    },
    // 
    handleAlertEventsList () {
      let obj = {
        ids: this.ids,
        startDateStr: this.startDateStr
      }
      findFireHydrantAlertEventsList(obj).then(reponse => {
        let list = reponse.data.list
        this.alertTableData = list.slice(0, list.length - 1)
        this.alertTableData.map(item => {
          if (item.metaProductCode == "00001" || item.metaProductCode == null || item.metaProductCode == undefined) {
            item.hardwareAlarmCount = item.collectAlarmCount
          }
        })
        console.log(this.alertTableData)
        // debugger;
      }).catch(error => {
      })
    },
    handleIds (e) {
      console.log(e)
      this.ids = e
      this.handleAlertEventsList()
    },
    getSearch (e) {
      this.nodeData = e;
      console.log(this.nodeData);
    },
    getSTime (e) {
      console.log(e)
      this.startDateStr = e
    },
    serchClick () {
      this.handleAlertEventsList()
    },
    resetClick () {
      this.handleYearMonth()
      this.$nextTick(function () {
        this.handleAlertEventsList()
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.waterAnalysis {
  display: flex;

  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }
  .leftTree {
    width: 270px;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
  }
  .rightcontant {
    width: calc(100% - 270px);
    padding: 20px 2px 0 2px;
  }
  .rightcontant2 {
    width: 100%;
    padding: 20px 2px 0 2px;
  }
  .top {
    height: 50px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
